<template >
  <div id="content">
    <!-- 顶部标签 -->
    <van-nav-bar
      title="地址管理"
      left-text="返回"
      left-arrow
      fixed
      placeholder
      style="background: #f00"
      @click-left="prev"
      @click-right="onAdd"
    >
      <template #right>
        <van-icon name="plus" size="18" />
      </template>
    </van-nav-bar>
    <div class="my-addr">我的地址</div>
    <div class="address-list">
      <div class="address" v-for="item in list" @click="returnAddr(item.id)">
        <div class="name">
          <div>{{ item.username }}</div>
          <div class="default" v-if="item.is_default == 1">默认</div>
        </div>
        <div class="desc">
          <div>{{ item.mobile }}</div>
          <div style="color: #5e7390">
            <span>{{ item.province.title }}</span>
            <span>{{ item.city.title }}</span>
            <span>{{ item.area.title }}</span>
            <span>{{ item.content }}</span>
          </div>
        </div>
        <div class="edit" @click="onEdit(item.id)">
          <van-icon name="edit" size="24" color="#8196B3" />
        </div>
      </div>
      <div
        v-if="list == ''"
        @click="onAdd"
        style="
          color: #7388a5;
          border-radius: 10px;
          padding: 10px 20px;
          border: 1px solid #677b96;
          margin-top: 100px;
        "
      >
        点我添加
      </div>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import { AddressList, NavBar, Icon } from "vant";
import { getAddressList } from "../../api/address";

Vue.use(AddressList).use(NavBar).use(Icon);

export default {
  data() {
    return {
      list: {},
      store_id: 0,
    };
  },
  created() {
    this.store_id = this.$route.params.store_id;
    this.fetchDetail();
    this.fetchAddrList();
  },
  methods: {
    // 获取商品详情
    fetchDetail() {},
    fetchAddrList() {
      getAddressList().then((res) => {
        this.list = res.data.list;
      });
    },
    // 返回上一页
    prev() {
      this.$router.go(-1);
    },
    // 选择地址，返回上一页
    returnAddr(addr_id) {
      this.$router.push({
        name: "storeOrder",
        params: { addr_id: addr_id, id: this.store_id },
      });
    },
    onAdd() {
      this.$router.push({ path: "addAddress" });
    },
    onEdit(id) {
      this.$router.push({ name: "editAddress", params: { id: id } });
    },
  },
};
</script>

<style scoped>
#content {
  background: #1b2b42;
  min-height: 100vh;
}
.my-addr {
  color: #fff;
  font-size: 24px;
  text-align: left;
  width: 90%;
  margin: 20px 0 20px 5%;
}
.address-list {
  width: 90%;
  margin-left: 5%;
}
.address {
  background: #2b405d;
  color: #fff;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  border-radius: 10px;
  padding: 10px;
  height: 100px;
  line-height: 30px;
  margin-top: 20px;
}
.name {
  width: 24%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.default {
  border: 1px solid #9c4a58;
  color: #9c4a58;
  font-weight: bold;
  width: 46px;
  font-size: 14px;
  border-radius: 10px;
  margin-top: 5px;
}
.desc {
  width: 60%;
  text-align: left;
}
.edit {
  width: 10%;
}
</style>
